<template>
  <view class="u-wrap">
    <u-navbar
      title-color="#303133"
      :is-fixed="true"
      :is-back="false"
      :background="background"
      :back-text-style="{color: '#303133'}"
      :border-bottom="false"
    >
      <view class="slot-wrap">
        <view class="search-wrap" @click="onSearch">
          <u-search
            v-model="keyword"
            :show-action="false"
            :height="70"
            :action-style="{color: '#fff'}"
            :border-color="'#fff'"
            :disabled="true"
          ></u-search>
        </view>
      </view>
      <view class="navbar-right" slot="right" v-if="isMP" @click="onMine">
        <view class="message-box right-item">
          <u-icon name="dibutubiao_wode" custom-prefix="custom-icon"></u-icon>
        </view>
      </view>
    </u-navbar>
    <view class="top-warp">
      <u-tabs :list="categoryList" :name="'cat_name'" :current="tabIndex" bg-color="#ff5000" active-color="#FFFFFF" inactive-color="#FFFFFF" @change="tabChangeHome"></u-tabs>
    </view>
    <view v-if="!tabIndex" class="floor-view">
      <view class="background-view"></view>
      <decor-modules v-if="floorData" :page-data="floorData" class="decor-view"/>
    </view>
    <mescroll-item ref="mescrollItem" v-for="(tab, i) in categoryList" :key="i" :i="i" :index="tabIndex" :tabs="categoryList" :statusBarHeight="statusBarHeight"></mescroll-item>
    <u-no-network></u-no-network>
  </view>
</template>

<script>
import * as API_Goods from '@/api/goods'
import * as API_Common from '@/api/common'
import * as API_Pages from '@/api/pages'
import Cache, { Keys } from '@/utils/cache'
import MescrollItem from './mescroll-item.vue'
import MescrollMoreMixin from '@/components/mescroll-uni/mixins/mescroll-more'
import DecorModules from '@/components/decor-modules/decor-modules'

export default {
  components: {
    MescrollItem,
    DecorModules
  },
  mixins: [MescrollMoreMixin],
  data() {
    return {
      keyword: '',
      //如果是小程序则隐藏
      background: {
        background: '#ff5000'
      },
      // #ifdef MP
      isMP: false,
      // #endif
      //如果是不是小程序则展示
      // #ifndef MP
      isMP: true,
      // #endif
      tabIndex: 0,
      categoryList: [],//分类数据
      floorData: '', //楼层数据
      networkType: '',//网络状态
      statusBarHeight: 0
    }
  },
  async onLoad() {
    let $this = this
    //获取网络类型
    uni.getNetworkType({
      success(res) {
        $this.networkType = res.networkType
        if (res.networkType !== 'none') {
          $this.init()
        }
      }
    })
  },
  mounted() {
    const that = this

    uni.getSystemInfo({
      success(res) {
        const query = uni.createSelectorQuery().in(that)
        query.select('.top-warp').boundingClientRect(data => {
          //状态栏高度+tab距离顶部的高度+tab的高度
          that.statusBarHeight = res.statusBarHeight + data.top + data.height
        }).exec()
      }
    })
  },
  onShow() {
    let $this = this
    //监听网络状态变化
    uni.onNetworkStatusChange(res => {
      //监听到有网络并且第一次没有加载数据的情况下初始化数据
      if (res.isConnected && $this.networkType === 'none') {
        $this.init()
      }
    })
  },
  methods: {
    async init() {
      // 获取楼层数据
      API_Pages.getIndexPage().then(res => {
        this.floorData = res
        res.page_name && uni.setNavigationBarTitle({ title: res.page_name })
      })
      // 获取分类数据
      API_Goods.getCategory().then(res => {
        res.unshift({ name: '首页', category_id: '' })
        this.categoryList = res
        //小程序发布需过滤医药及食品类目
        // this.categoryList = res.filter(key=> key.category_id != 85 && key.category_id != 4)
      })
      // 获取站点数据
      API_Common.getSiteData().then(res => {
        Cache.setItem(Keys.site, res)
      })
    },
    //搜索
    onSearch() {
      uni.navigateTo({ url: '/pages/search/search' })
    },
    //我的
    onMine() {
      uni.switchTab({ url: '/pages/tabs/mine/mine' })
    },
    //导航栏点击
    tabChangeHome(index) {
      this.tabIndex = index
    }
  }
}
</script>

<style lang="scss" scoped>
.top-warp {
  z-index: 9990;
  position: fixed;
  top: --window-top; /* css变量 */
  left: 0;
  width: 100%;
  background-color: #ff5000;
  height: 100rpx;
}
.slot-wrap {
  flex: 1;
  padding-left: 20rpx;
  .search-wrap {
    margin: 0 20rpx;
  }
}
.navbar-right {
  color: #FFFFFF;
  margin-right: 24rpx;
  display: flex;
  .right-item {
    position: relative;
    color: #FFFFFF;
    display: flex;
    font-size: 40rpx;
    font-weight: 600;
  }
}
.floor-view {
  position: relative;
  margin-top: 100rpx;
  padding-bottom: 140rpx;
}
.background-view {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  background-color: $u-type-error;
  width: 100%;
  height: 200rpx;
  border-bottom-right-radius: 4em 0.2em;
  border-bottom-left-radius: 4em 0.2em;
}
</style>
